@import url('./code.css');

.scalar-app {
  .markdown {
    font-family: var(--scalar-font);
    color: var(--scalar-color-1);
    word-break: break-word;
  }

  /* Apply base padding for all block elements */
  .markdown h1,
  .markdown h2,
  .markdown h3,
  .markdown h4,
  .markdown h5,
  .markdown h6,
  .markdown p,
  .markdown div,
  .markdown img,
  .markdown details,
  .markdown summary,
  .markdown ul,
  .markdown ol,
  .markdown table,
  .markdown blockquote,
  .markdown code {
    margin: 12px 0;
  }

  .markdown details {
    margin: 12px 0;
    color: var(--scalar-color-1);
  }
  .markdown summary {
    display: block;
    margin: 12px 0;
    padding-left: 20px;
    position: relative;
    font-weight: var(--scalar-semibold);
    cursor: pointer;
    user-select: none;
  }

  .markdown summary::after {
    display: block;
    content: '';

    position: absolute;
    top: 1px;
    left: 1px;

    width: 16px;
    height: 16px;

    background-color: var(--scalar-color-3);
    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.25 19.5L15.75 12L8.25 4.5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  }

  .markdown summary:hover::after {
    background-color: var(--scalar-color-1);
  }

  .markdown details[open] summary::after {
    transform: rotate(90deg);
  }

  /* Fix for Safari displaying default caret next to `<summary>` */
  .markdown summary::-webkit-details-marker {
    display: none;
  }

  .markdown img {
    overflow: hidden;
    border-radius: var(--scalar-radius);
    max-width: 100%;
  }
  /* Don't add margin to the first block */
  .markdown > :first-child {
    margin-top: 0;
    margin-bottom: 0;
  }

  .markdown h1 {
    --font-size: 1.4em;
  }

  .markdown h2 {
    --font-size: 1.25em;
  }

  .markdown h3 {
    --font-size: 1.1em;
  }

  .markdown h4 {
    --font-size: 1em;
  }

  .markdown h6 {
    --font-size: 1em;
  }
  .markdown h1,
  .markdown h2,
  .markdown h3,
  .markdown h4,
  .markdown h5,
  .markdown h6 {
    font-size: var(--font-size);
    margin: 18px 0 6px;
    font-weight: var(--scalar-bold);
    display: block;
    line-height: 1.45;
  }
  .markdown b,
  .markdown strong {
    font-weight: var(--scalar-bold);
  }
  .markdown p {
    color: inherit;
    font-weight: var(--font-weight, var(--scalar-regular));
    line-height: 1.5;
    margin-bottom: 0;
    display: block;
  }

  .markdown ul,
  .markdown ol {
    padding-left: 24px;
    line-height: 1.5;
    margin: 12px 0;
    display: block;
  }

  .markdown ul {
    list-style: disc;
  }

  .markdown ol {
    list-style: decimal;
  }

  .markdown ul.contains-task-list {
    list-style: none;
    padding-left: 0;
  }

  .markdown li {
    margin: 6px 0;
    display: list-item;
  }
  .markdown ul:first-of-type li:first-of-type {
    margin-top: 0;
  }
  .markdown a {
    color: var(--scalar-color-accent);
    text-decoration: var(--scalar-text-decoration);
    cursor: pointer;
  }
  .markdown a:hover {
    text-decoration: var(--scalar-text-decoration-hover);
  }
  .markdown em {
    font-style: italic;
  }
  .markdown sup {
    font-size: var(--scalar-micro);
    vertical-align: super;
    font-weight: 450;
  }
  .markdown sub {
    font-size: var(--scalar-micro);
    vertical-align: sub;
    font-weight: 450;
  }
  .markdown del {
    text-decoration: line-through;
  }
  .markdown code {
    font-family: var(--scalar-font-code);
    background-color: var(--scalar-background-2);
    box-shadow: 0 0 0 var(--scalar-border-width) var(--scalar-border-color);
    font-size: var(--scalar-micro);
    border-radius: 2px;
    padding: 0 3px;
  }

  .markdown pre code {
    display: block;
    white-space: pre;
    padding: 12px;
    line-height: 1.5;
    margin: 12px 0;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    max-width: 100%;
    min-width: 100px;
  }

  .markdown hr {
    border: none;
    border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);
  }

  .markdown blockquote {
    border-left: 3px solid var(--scalar-border-color);
    padding-left: 12px;
    margin: 0;
    display: block;
  }

  .markdown table {
    display: block;
    overflow-x: auto;
    position: relative;
    border-collapse: collapse;
    width: max-content;
    max-width: 100%;
    margin: 1em 0;
    box-shadow: 0 0 0 var(--scalar-border-width) var(--scalar-border-color);
    border-radius: var(--scalar-radius-lg);
  }
  .markdown tbody {
    display: table-row-group;
    vertical-align: middle;
  }
  .markdown thead {
    display: table-header-group;
    vertical-align: middle;
  }

  .markdown tr {
    display: table-row;
    border-color: inherit;
    vertical-align: inherit;
  }
  .markdown td,
  .markdown th {
    display: table-cell;
    vertical-align: inherit;
    min-width: 1em;
    padding: 6px 9px;
    vertical-align: top;
    line-height: 1.5;
    position: relative;
    word-break: initial;
    font-size: var(--scalar-small);
    color: var(--scalar-color-1);
    font-weight: var(--font-weight, var(--scalar-regular));
    border-right: var(--scalar-border-width) solid var(--scalar-border-color);
    border-bottom: var(--scalar-border-width) solid var(--scalar-border-color);
  }

  .markdown td > *,
  .markdown th > * {
    margin-bottom: 0;
  }
  .markdown th:empty {
    display: none;
  }
  .markdown td:first-of-type,
  .markdown th:first-of-type {
    border-left: none;
  }

  .markdown td:last-of-type,
  .markdown th:last-of-type {
    border-right: none;
  }

  .markdown tr:last-of-type td {
    border-bottom: none;
  }

  .markdown th {
    font-weight: var(--scalar-semibold) !important;
    text-align: left;
    border-left-color: transparent;
    background: var(--scalar-background-2);
  }

  .markdown tr > [align='left'] {
    text-align: left;
  }
  .markdown tr > [align='right'] {
    text-align: right;
  }
  .markdown tr > [align='center'] {
    text-align: center;
  }
}
